<template>
  <div class="catalog-box" :style="style">
    <div class="catalog-box__body">
      <img v-if="showImage" :src="imageUrl" @click="handleClick">
      <span v-else class="icon iconfont icon-folder" @click="handleClick"></span>
    </div>
    <div class="catalog-box__footer">
      <span>{{ data.name }}</span>
    </div>
    <div v-if="!preview" class="icon-group--bottom">
      <span class="icon iconfont icon-ashbin" @click="handleDelete"></span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'WsCatalogBox',
  components: {},
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    preview: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: 120
    },
    height: {
      type: [String, Number],
      default: 145
    }
  },
  data () {
    return {
    }
  },
  computed: {
    style () {
      let w = this.width
      let h = this.height
      if (typeof w === 'number') {
        w = w + 'px'
      }
      if (typeof h === 'number') {
        h = h + 'px'
      }
      return {
        width: w,
        height: h
      }
    },
    showImage () {
      return this.data && this.data.resType === 'IMAGE'
    },
    imageUrl () {
      return this.data && this.data.url
    }
  },
  methods: {
    handleDelete () {
      this.$emit('delete', this.data, this)
    },

    handleClick () {
      this.$emit('click', this.data, this)
    }
  }
}
</script>
